<script setup>
import { ref, watch } from 'vue'
import { getBusinessByIdService } from '@/api/business.js'

const props = defineProps({
  businessId: {
    type: Number,
    required: true
  }
})

// 业务状态与el-tag类型映射
const businessStatusTagTypeMap = {
  待接单: 'warning',
  进行中: 'primary',
  已完成: 'success',
  已退款: 'danger'
}
const getBusinessStatusTagType = (status) => {
  return businessStatusTagTypeMap[status] || 'info'
}

// 获取业务信息
const businessInfo = ref({})
const getBusinessById = async (id) => {
  const res = await getBusinessByIdService(id)
  businessInfo.value = res.data.data
}

// 监听 businessId 的变化，当 businessId 变化时重新获取业务信息
watch(
  () => props.businessId,
  (newId) => {
    if (newId) {
      getBusinessById(newId)
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-form :model="businessInfo" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="业务ID">
          <el-tag type="info">{{ businessInfo.id }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务项目名称">
          <el-tag type="info">{{ businessInfo.projectName }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="员工姓名">
          <el-tag type="info">{{ businessInfo.employeeName ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会员姓名">
          <el-tag type="info">{{ businessInfo.memberName }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="车牌号">
          <el-tag type="info">{{ businessInfo.carPlateNumber }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实际服务时长">
          <el-tag type="info">{{
            businessInfo.actualDuration !== null ? `${businessInfo.actualDuration}分钟` : '---'
          }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="应付金额">
          <el-tag type="info">{{ (businessInfo.payableAmount / 100).toFixed(2) }}元</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="付款方式">
          <el-tag type="info">{{ businessInfo.payMethod }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="业务状态">
          <el-tag :type="getBusinessStatusTagType(businessInfo.status)">{{
            businessInfo.status
          }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-tag type="info">{{ businessInfo.createTime }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12"> </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="更新时间">
          <el-tag type="info">{{ businessInfo.updateTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
